<template>
  <a-form
    ref="formRef"
    :model="data"
    name="basic"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <a-form-item
      v-for="(item, index) in config.items"
      :key="index"
      :label="item.label"
      :name="item.name"
      :rules="item.rules"
    >
      <!-- input输入 -->
      <a-input
        v-if="item.type === 'input'"
        v-model:value="data[getKey(item.name)]"
        :placeholder="
          item.input?.placeholder
            ? item.input?.placeholder
            : `请输入${item.label}`
        "
      />

      <!-- 开关 -->
      <a-switch
        v-if="item.type === 'switch'"
        v-model:checked="data[getKey(item.name)]"
      />

      <!-- 插槽 -->
      <slot
        v-if="item.type === 'slot'"
        :name="item.slotName"
        :row="data"
      ></slot>

      <!-- 日期选择 -->
      <a-date-picker
        v-if="item.type === 'date-picker'"
        v-model:value="data[getKey(item.name)]"
        :placeholder="item.datePicker?.property?.placeholder || '请选择日期'"
      />
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { PropType, ref, inject, nextTick } from "vue";
import { FormConfig } from "./types";

const emit = defineEmits([""]);
const props = defineProps({
  /** 表单配置 */
  config: {
    type: Object as PropType<FormConfig<any>>,
    required: true,
  },
  /** 表单数据 */
  data: {
    type: Object,
    required: true,
  },
});

const formRef = ref();

/**
 * 获取父组件的依赖注入数据
 */
const modal: any = inject("modal");
nextTick(() => {
  //通过回调函数把当前表单ref传给自定义modal组件
  modal?.formRefCallback(formRef.value);
});

const getKey = (key: any) => {
  return key;
};
</script>
<style lang="scss" scoped></style>
